<!DOCTYPE html>
<html>
<head>
    <title>socket.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html" charset="UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <style>

        .host_left{
            width: 40%;
            float: left;
            height: 600px;
            margin-left: 5%;
            background-color: burlywood;
        }

        .host_right{
            width: 40%;
            height: 600px;
            float: right;
            margin-right: 5%;
            background-color: burlywood;
        }
    </style>
</head>

<body>

freemarker测试传值：<input type="text" value="${userId}" readonly/> <br>
<div class="host_left">
    <h3>springboot websocket 练习</h3>
    账号：<input id="userID" type="text" readonly/> <br>
    消息：<input id="text" type="text"/> <br>
    接收账号：<input id="receive" type="text"/>
    <button onclick="send1()">Send</button>
    <button onclick="closeWebSocket()">Close</button>
    <div id="message" style="width: 100%;height:100%;background-color: blanchedalmond;overflow:auto">
    </div>
</div>
<div class="host_right">
    <h3>netty websocket 练习</h3>
    消息：<input value="你好" id="sendValue" /><br />
    <button onclick="send2()">点击发送</button>
    <div id="responseText" style="width: 100%;height:100%;background-color: blanchedalmond;overflow:auto"></div>
</div>

<!--<h3>springboot websocket 练习</h3>-->
<script type="text/javascript">

    var userID = new Date().getTime() - new Date("2019/9/27").getTime();
    document.getElementById("userID").value = userID
    var websocket = null;

    window.onload = function () {
        //创建WebSocket
        connectWebSocket();
    }

    //强制关闭浏览器  调用websocket.close（）,进行正常关闭
    window.onunload = function () {

        //关闭连接
        closeWebSocket();
    }

    //建立WebSocket连接
    function connectWebSocket() {

        console.log("开始...");

        //建立webSocket连接
        websocket = new WebSocket("ws://127.0.0.1:9924/myH5Handler/ID=" + userID);
        showMsg("请求：" + "ws://127.0.0.1:9924/myH5Handler/ID=" + userID)
        //打开webSokcet连接时，回调该函数
        websocket.onopen = function () {
            console.log("onpen");
            showMsg("建立连接")
        }

        //关闭webSocket连接时，回调该函数
        websocket.onclose = function () {
            //关闭连接
            console.log("onclose");
            showMsg("关闭连接")
        }

        //接收信息
        websocket.onmessage = function (msg) {
            console.log(msg.data);
            showMsg(msg.data)
        }
    }

    //发送消息
    function send1() {
        if (websocket.readyState == WebSocket.OPEN) {
            var postValue = {};
            postValue.sendId = userID;

            postValue.message = document.getElementById("text").value
            postValue.receiveId = document.getElementById("receive").value
            websocket.send(JSON.stringify(postValue));

            if(postValue.receiveId){
                showMsg("发送消息给："+postValue.receiveId +", 消息为："+ postValue.message)
            } else{
                showMsg("发送消息给：所有人, 消息为："+ postValue.message)
            }
        } else {
            showMsg("WebSocket 连接没有建立成功！");
        }

    }

    //关闭连接
    function closeWebSocket() {
        if (websocket != null) {
            showMsg("关闭连接")
            websocket.close();
        }
    }

    function showMsg(msg){
        var msg_dom = document.getElementById("message")
        msg_dom.innerText +=msg+"\r\n";
    }
</script>

<!--<h3>netty websocket 练习</h3>-->
<script>
    var socket;

    if (!window.WebSocket) {

        window.WebSocket = window.MozWebSocket;
    }

    if (window.WebSocket) {
        socket = new WebSocket("ws://localhost:9923/wsNetty");

        socket.onmessage = function(event) {

            var ta = document.getElementById('responseText');
            ta.innerText += event.data + "\r\n";
        };

        socket.onopen = function(event) {

            var ta = document.getElementById('responseText');
            ta.innerText  = "打开WebSoket 服务正常，浏览器支持WebSoket!" + "\r\n";

        };

        socket.onclose = function(event) {

            var ta = document.getElementById('responseText');
            ta.innerText = "";
            ta.innerText = "WebSocket 关闭" + "\r\n";
        };
    } else {
        alert("您的浏览器不支持WebSocket协议！");
    }

    function send2() {
        if (!window.WebSocket) {
            return;
        }

        var dom_sendValue = document.getElementById("sendValue")
        if (socket.readyState == WebSocket.OPEN) {
            socket.send(dom_sendValue.value);
        } else {
            alert("WebSocket 连接没有建立成功！");
        }
    }
</script>

</body>
</html>